import logo from '../../static/bootstrap/images/logo.svg';
import React, { useState } from 'react';
import { useNavigate, Link } from 'react-router-dom';
import { useLocation } from 'react-router-dom';
import { NavLink } from 'react-router-dom';
import '../../static/bootstrap/css/NavLink.css'


function AdminNavBar({ address }) {
    const navigate = useNavigate();

    //控制下拉框1
    const [isOpen, setIsOpen] = useState(false);
    const toggleMenu = () => setIsOpen(!isOpen);
    //控制下拉框2
    const [isOpen1, setIsOpen1] = useState(false);
    const toggleMenu1 = () => setIsOpen1(!isOpen1);
    //高亮
    const [activeItem, setActiveItem] = useState(1);
    const location = useLocation();

    const handleClick = (item) => {
        setActiveItem(item);
    };
    return (
        <nav
            className="sidebar-wrapper"
            id="sidebar"
        >
            <div className="app-brand px-3 py-2 d-flex align-items-center">
                <Link to={`/admin/${address}`}>
                    <img
                        alt="Bootstrap Gallery"
                        className="logo"
                        src={logo}
                    />
                </Link>
            </div>
            <div className="sidebarMenuScroll">
                <ul className="sidebar-menu">
                    <li className={location.pathname === `/admin/${address}` ? ' current-page' : ''}>
                        <NavLink to={`/admin/${address}`}>
                            <i className="icon-stacked_line_chart" />
                            <span className="menu-text">
                                管理员首页
                            </span>
                        </NavLink>
                    </li>
                    <li className={location.pathname === `/admin/${address}/Admin_createAccount` ? ' current-page' : ''}>
                        <NavLink to={`/admin/${address}/Admin_createAccount`}>
                            <i className="icon-bar-chart" />
                            <span className="menu-text">
                                初始化用户
                            </span>
                        </NavLink>
                    </li>
                    <li className={location.pathname === `/admin/${address}/Admin_getStudentInfoList` ? ' current-page' : ''}>
                        <Link to={`/admin/${address}/Admin_getStudentInfoList`}>
                            <i className="icon-filter_list" />
                            <span className="menu-text">
                                用户管理
                            </span>
                        </Link>
                    </li>
                    {/* <li className={`treeview ${isOpen ? 'active' : ''}` } > */}
                    <li className={`treeview ${isOpen || location.pathname === `/admin/${address}/Admin_credits/Admin_RuleList` || location.pathname === `/admin/${address}/Admin_credits/Admin_ExchangeRecordList` ? 'active ' : ''}`}>
                        <Link to={`/admin/${address}/Admin_credits/Admin_RuleList`} onClick={toggleMenu}>
                            <i className="icon-add_task" />
                            <span className="menu-text">
                                积分兑换管理
                            </span>
                        </Link>
                        <ul className="treeview-menu">
                            <li className={location.pathname === `/admin/${address}/Admin_credits/Admin_RuleList` ? 'active-link' : ''}>
                                <Link to={`/admin/${address}/Admin_credits/Admin_RuleList`}>                                    <i className="icon-filter_list" />
                                    积分列表
                                </Link>
                            </li>
                            <li className={location.pathname === `/admin/${address}/Admin_credits/Admin_ExchangeRecordList` ? 'active-link' : ''}>
                                <Link to={`/admin/${address}/Admin_credits/Admin_ExchangeRecordList`}>                                    <i className="icon-filter_list" />
                                    用户兑换记录
                                </Link>
                            </li>
                        </ul>
                    </li>
                    <li className={location.pathname === `/admin/${address}/Admin_integral/Admin_ActivityList` ? ' current-page' : ''}>
                        <Link to={`/admin/${address}/Admin_integral/Admin_ActivityList`}>
                            <i className="icon-support_agent" />
                            <span className="menu-text">
                                活动管理
                            </span>
                        </Link>
                    </li>
                    <li className={location.pathname === `/admin/${address}/Admin_integral/Admin_GetUserCourseInfo` ? ' current-page' : ''}>
                        <Link to={`/admin/${address}/Admin_credits/Admin_GetUserCourseInfo`}>
                            <i className="icon-bell" />
                            <span className="menu-text">
                                查询学生课程记录
                            </span>
                        </Link>
                    </li>
                    {/* <li>
                        <a href="subscribers.html">
                            <i className="icon-check-circle" />
                            <span className="menu-text">

                            </span>
                        </a>
                    </li> */}
                    <li className={`treeview ${isOpen1 || location.pathname === `/admin/${address}/Admin_integral/Admin_CourseManage` || location.pathname === `/admin/${address}/Admin_integral/Admin_addMultiCourses` ? 'active' : ''}`}>
                        <Link to={`/admin/${address}/Admin_credits/Admin_CourseManage`} onClick={toggleMenu1}>
                            <i className="icon-book-open" />
                            <span className="menu-text">
                                课程管理
                            </span>
                        </Link>
                        <ul className="treeview-menu">
                            <li className={location.pathname === `/admin/${address}/Admin_credits/Admin_CourseManage` ? 'active-link' : ''}>
                                <Link to={`/admin/${address}/Admin_credits/Admin_CourseManage`}>                                    <i className="icon-filter_list" />
                                    课程列表
                                </Link>
                            </li>
                            <li className={location.pathname === `/admin/${address}/Admin_credits/Admin_addMultiCourses` ? 'active-link' : ''}>
                                <Link to={`/admin/${address}/Admin_credits/Admin_addMultiCourses`}>                                    <i className="icon-filter_list" />
                                    添加课程
                                </Link>
                            </li>
                            <li className={location.pathname === `/admin/${address}/Admin_initMultiCourseRecord` ? 'active-link' : ''}>
                                <Link to={`/admin/${address}/Admin_credits/Admin_initMultiCourseRecord`}>                                    <i className="icon-filter_list" />
                                    学生课程初始化
                                </Link>
                            </li>

                        </ul>
                    </li>

                </ul>
            </div>
        </nav>
    );
}

export default AdminNavBar;